<template>
  <div class="e-wrap">
    <div class="e-item">
        <span class="title">app版本号</span>
        <div class="dis-block">
            <w-input :holder="`请填写`" v-model="uploadParams.versionNum"></w-input>
        </div>
    </div>
    <div class="e-item">
        <span class="title">版本类型</span>
        <div class="dis-block">
          <w-select :options='versionType' v-model="uploadParams.versionSource"></w-select>
        </div>
    </div>
    <div class="e-item">
        <span class="title">是否强制更新</span>
        <div class="dis-block">
            <span style="margin-right:80px;">
                <w-radio name='update' :label='1' v-model="uploadParams.isForceUpdate">是</w-radio>
            </span>
            <w-radio name='update' :label='0' v-model="uploadParams.isForceUpdate">否</w-radio>
        </div>
    </div>
    <div class="e-item">
        <span class="title">版本上传</span>
        <div class="dis-block">
            <div class="file-upload"  @click="chooseFile">
              <input type="text" placeholder="请选择文件" readonly v-model="uploadParams.versionLinkUrl">
            </div>
            <input type="file" accept="application/vnd.android" ref="fileInput" @change="changeUrl" style="display: none;">
            <button type='button' class="browse" @click="chooseFile">浏览</button>
        </div>
    </div>
    <!-- <div class="e-item">
        <span class="title" style="vertical-align:top;margin-top: 10px;">欢迎页上传</span>
        <div class="dis-block">
          <div class="imgBox">
            <img :src="imgSrc" alt="">
          </div>
          <input type="file" ref="imgInput" @change="changeImg" accept='image/*' style="display: none;">
          <button type='button' class="browse" @click="chooseImg">浏览</button>
        </div>
    </div> -->
    <upload-img :title="`欢迎页上传`" :width='76' @on-img='getImg' :imgSrc='uploadParams.welcomeImg' :type='`appwelcome`'></upload-img>
    <!-- 保存按钮 -->
    <div class="save-btn">
      <w-button @on-click='submitUpload'>保存</w-button>
    </div>
  </div>
</template>

<script>
import { apiAppMange, apiMemberMange } from 'js/api'
import { mapGetters } from 'vuex'
import UploadImg from '../homeDecorate/components/uploadImg'

export default {
  data() {
    return {
      imgSrc: '',
      uploadParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        versionNum: '',
        versionSource: '',
        isForceUpdate: '0',
        versionLinkUrl: '',
        welcomeImg: ''
      },
      versionType: []
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  components: {
    'upload-img': UploadImg
  },
  created() {
    this._getVersionType()
  },
  methods: {
    // 与 app版本上传 中 的按钮绑定
    chooseFile() {
      this.$refs.fileInput.click()
    },
    // 上传app版本
    changeUrl() {
      this.fileUrl = 'aa'
      const file = this.$refs.fileInput.files[0]
      if (!file) return
      if (!/\.(apk)/i.test(file.name)) {
        this.$toast('请选择apk格式的文件')
        return
      }
      const formData = new FormData()
      formData.append('file', file)
      formData.append('accessToken', this.token)
      formData.append('threeMenuCode', this.$route.query.three)
      apiAppMange.uploadFile(formData).then(data => {
        if (data.code != '200') return
        this.uploadParams.versionLinkUrl = data.data.filePath
      }) 
    },
    getImg(src) {
      this.uploadParams.welcomeImg = src
    },
    // 获取版本类型 
    _getVersionType() {
      apiMemberMange.queryType('版本类型').then(data => {
        if (data.code != '200') return
        this.versionType = data.data.map(item => {
          return {
            value: item.dictName,
            label: item.dictName
          }
        })
      })
    },
    submitUpload() {
      this.uploadParams.accessToken = this.token
      if (!this.uploadParams.versionNum) {
        this.$toast('请填写版本号')
        return
      }
      if (!this.uploadParams.versionSource) {
        this.$toast('请选择版本类型')
        return
      }
      if (this.uploadParams.versionSource == 'android') {
        if (!this.uploadParams.versionLinkUrl) {
          this.$toast('请上传版本')
          return
        }
      }
      // if (!this.uploadParams.welcomeImg) {
      //   this.$toast('请上传欢迎页')
      //   return
      // }
      apiAppMange.uploadVersion(this.uploadParams).then(data => {
        if (data.code != '200') return
        this.$toast('上传成功', () => {
          // 刷新页面
          location.reload()
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../scss/_var.scss';
@import '../../scss/_comment.scss';
.e-wrap {
    width: 450px;
    margin: 30px auto;
    .e-item {
      display: block;
      margin-bottom: 20px;
      margin-left: 0;
      .title {
        width: 76px;
        margin-right: 19px;
      }
      .dis-block {
        width: 320px;
        .imgBox {
          display: inline-block;
          width: 54px;
          height: 54px;
          border: 1px solid $border-gray;
        }
      }
      .file-upload {
        display: inline-block;
        width: 234px;
        height: 30px;
        line-height: 30px;
        padding-left: 10px;
        color: $color-dark;
        border: 1px solid $border-gray;
        input {
          width: 96%;
        }
      }
    }
    .save-btn {
      text-align: center;
    }
}
</style>